<template>
  <div id="app">
    <div v-if="logined" class="box">
      <navBar></navBar>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>

      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <div class="logout-content" id="logout" v-show="showLogout" @click="cancellogout">
        <div style="width: 100%;height: 0.5px;background-color: #E5E5E5"></div>
        <p class="logout-title" style="color: red;" @click="logout">退出登录</p>
        <div style="width: 100%;height: 1px;background-color: #E5E5E5"></div>
        <p class="logout-title"  @click = 'cancellogout'>取消</p>
      </div>
    </div>
    <div v-else class="box">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>

    </div>
  </div>
</template>

<script>
  import navBar from './components/nav/navbar.vue'
  import {mapActions, mapState} from 'vuex'
  export default {
    name: 'App',
    data() {
        return {
//          logined: this.$store.state.logined
        }
    },
    methods: {
      ...mapActions([
        'getALLFactoryList',
        'getUserInfo'
      ]),
      cancellogout(){
        this.$store.state.showLogout = false
      },
      logout(){
        this.$store.state.logined = false
        localStorage.setItem('token', '')
        localStorage.setItem('userid', '')
        location.href = this.$store.state.locationHeader
      },
      getUrlParam: function () {
        var params= {};
        var str=location.href; //取得整个地址栏
        var num=str.indexOf("?");
        str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

        var arr=str.split("&"); //各个参数放到数组里
        for(var i=0;i < arr.length;i++){
          num=arr[i].indexOf("=");
          if(num>0){
            var  name = arr[i].substring(0,num);
            var  value = arr[i].substr(num+1);
            params[name] = value
          }
        }
        return params
      }
    },
    computed: {
      ...mapState({
          showLogout: state => state.showLogout,
          logined: state => state.logined,
          reqTokenFailed: state => state.reqTokenFailed,
          reqTokenExpire: state => state.reqTokenExpire,
      }),

    },
    watch: {
      reqTokenFailed(newValue){
        this.$dialog.toast({
          mes: '您没有操作权限！',
          timeout: 1500,
          icon: 'error',
          callback: () => {

          }
        });
      },
      reqTokenExpire(newValue){
        this.$dialog.toast({
          mes: 'token无效或过期，请重新登录！',
          timeout: 1500,
          icon: 'error',
          callback: () => {
            this.$store.state.logined = false
            localStorage.setItem('token', '')
            localStorage.setItem('userid', '')
            location.href = this.$store.state.locationHeader
          }
        });
      }
    },
    components: {
        navBar
    },
    mounted () {

      if(this.$route.path != '/' && this.$route.path != '/login/loginwx'){
        //先登录
        if (!localStorage.getItem('token')){
          this.logout()
          return
        }
        this.getUserInfo({userid: localStorage.getItem('userid')})
          .then((data)=>{
            this.$store.state.logined = true
            this.$store.state.userInfo = data.result
          })
        this.getALLFactoryList({page: 1})
      }


      var params = this.getUrlParam()
      if(localStorage.getItem('codepath') == '/login/loginwx' && params['code']){
        this.$store.state.logined = true
        localStorage.setItem('codepath','');
        this.$router.push('/login/loginwx')
      }else if (localStorage.getItem('codepath') == '/plate/scan' && params['code']){
        this.$store.state.logined = true
        localStorage.setItem('codepath','');
        this.$router.push('/plate/scan')
      }

    }
  }
</script>

<style>
html,body{
  width: 100%; height: 100%;
  overflow: hidden;
  transform: scale(1.0);
}
.logout-title{
  width: 100%;
  height: 50px;
  /*margin-top: 0.2px;*/
  background-color: white;
  line-height: 50px;
}
.logout-content{
  position: absolute;
  top:80px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  overflow: hidden;
  /*padding-top: 0.2px;*/
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%; height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /*margin-top  : 60px;*/
}

.box{
  position: relative;
  width: 100%;
}

button{
  outline: none;
  border:0;
}

p { white-space:nowrap; }

input {
    background-color: white;
    outline: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-appearance: none
}
::-webkit-input-placeholder { /* WebKit browsers */
  color:    #969696;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    #969696;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #969696;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:    #969696;
}
</style>
